/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view style="position: fixed;bottom:0;width: 100%;height: 100vh;z-index: 999;">
		
		<view class="mask"   @touchmove.stop.prevent  @click='close()'></view>
		<view  style="position: absolute;bottom:0;width: 100%;height: 700upx;z-index: 999;background: #FFFFFF;">
			<view class="picker-head">
				<view class="close"  @click='close()'>
					<image src="/static/close.png" mode=""></image>
				</view>
			</view>
			 <picker-view v-if="visible" :indicator-style="indicatorStyle" style="margin-top:30upx;height: 400upx;width: 60%;margin-left: 20%;background: #FFFFFF;" :value="value" @change="bindChange">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in shis" :key="index">{{item}}点</view>
			    </picker-view-column>
				<!-- <picker-view-column>
				    <view class="item" >:</view>
				</picker-view-column> -->
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in fens" :key="index">{{item}}分</view>
			    </picker-view-column>
			</picker-view>
			<view class="commit-btn"  @click='commit'>确认</view>
		</view>
	</view>
</template>

<script>
	export default {
    data: function () {
        const date = new Date()
        const shis = []
        const shi = 12
        const fens = []
        const fen = 30
        for (let i = 1; i <= 23; i++) {
            shis.push(i)
        }
        for (let i = 1; i <= 59; i++) {
            fens.push(i)
        }
        return {
            title: 'picker-view',
            shis,
            shi,
            fens,
            fen,
            value: [11, 29],
            visible: true,
            indicatorStyle: ''
        }
    },
    methods: {
        bindChange: function (e) {
            const val = e.detail.value
            this.shi = this.shis[val[0]]
            this.fen = this.fens[val[1]]
        },
		close(){
			//#ifdef APP-PLUS|| MP-WEIXIN
			this.$parent.closePicker();
			//#endif
			//#ifndef APP-PLUS|| MP-WEIXIN
			this.$parent.$parent.closePicker();
			//#endif
		},
		commit(){
			//#ifdef APP-PLUS|| MP-WEIXIN
			this.$parent.time = this.shi+':'+this.fen ;
			this.$parent.closePicker();
			//#endif
			//#ifndef APP-PLUS|| MP-WEIXIN
			this.$parent.$parent.time = this.shi+':'+this.fen;
			this.$parent.$parent.closePicker();
			//#endif
		}
    }
}
</script>

<style scoped>
	.picker-head{
		width: 100%;
		height: 80upx;
		border-bottom: #999999 solid 1upx;
	}
	.close{
		width: 80upx;
		height: 80upx;
		float: right;
	}
	.close image{
		width: 30upx;
		margin: 25upx;
		height: 30upx;
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		background: rgba(0,0,0,0.3);
	}	
	/* .uni-padding-wrap{
		position: fixed;
		bottom: 0;
		background: #007AFF;
		width: 100%;
		z-index: 999;
		left: 0;
	} */
	.item{
		text-align: center;
	}
	.commit-btn{
		width: 500upx;
		margin-left: 125upx;
		height: 60upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
		margin-top: 50upx;
		border-radius: 30upx;
		background: -webkit-linear-gradient(left, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
</style>
